<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<jsp:include page="frame/header.jsp"></jsp:include>

<title>新生入学指南</title>
</head>

<body>


	<div class="container-fluid">
		<div class="row-fluid">
			<div>
				<ul class="breadcrumb">
					<li><a href="#">生活信息</a> <span class="divider">/</span></li>
					<li><a href="#">新生入学指南</a></li>
				</ul>
			</div>

			<div class="box">
				<div class="box-header well" data-original-title>
					<h2>
						<i class="icon-edit"></i> 新生入学指南
					</h2>
					<div class="box-icon">
						<a href="#" class="btn btn-setting btn-round"><i
							class="icon-cog"></i></a> <a href="#"
							class="btn btn-minimize btn-round"><i class="icon-chevron-up"></i></a>
						<a href="#" class="btn btn-close btn-round"><i
							class="icon-remove"></i></a>
					</div>
				</div>
				<div class="box-content">
					<form class="form-horizontal">
						<div class="control-group">
							<label class="control-label" for="title">标题</label>
							<div class="controls">
								<input type="text" class="input-xlarge" id="title"
									placeholder="">
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="title">学校</label>
							<div class="controls">
								<select id="deviceType" class="input-xlarge" name="deviceType" check-type="required" 
									required-message="请选择设备类型">
									<option value="1">曼彻斯特大学</option>
									<option value="2">剑桥大学</option>
									<option value="2">哈佛大学</option>
								</select>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="title">简介</label>
							<div class="controls">
								<textarea id="features" class="input-xxlarge" name="performance"
									rows="4"></textarea>
							</div>
						</div>
						<div class="control-group">
							<label class="control-label" for="inputPassword">详细描述</label>
							<div class="controls">
								<textarea id="features" name="performance" rows="30"
									style="width: 95%" class="xheditor"></textarea>
							</div>
						</div>
						<div class="form-actions">
								<button id="saveBtn" type="button" class="btn btn-primary">更新</button>
								<button id="cancelBtn" type="button" class="btn">取消</button>
							</div>
					</form>

				</div>
			</div>
			<!--/span-->

			
		</div>
		<!--/fluid-row-->

	</div>
	<!--/.fluid-container-->

	<jsp:include page="frame/scripts.jsp"></jsp:include>
	<script type="text/javascript">
		var userInfo = Tempo.prepare("userInfo");
		var curPage = 1;
		var search = '';

		$(document).ready(function() {

			loadPages(curPage);
			showList();

			$("#newBtn").click(function() {
				showAdd();
				$("#myform").resetForm();
				removeErrorTag();
			})

			$("#cancelBtn").click(function() {
				showList();
			})

			$("#myform").validation();
			ajaxForm();

			$("#saveBtn").click(function() {
				$("#myform").submit();
			})

			$("#searchBtn").click(function() {
				loadPages(1);
			})
		})

		function showList() {
			$("#addUser").hide();
			$("#listUser").show();
		}

		function showAdd() {
			$("#addUser").show();
			$("#listUser").hide();
		}

		function ajaxForm() {
			$('#myform').ajaxForm(
					{
						url : '<c:url value="/admin/user/add"/>',
						type : 'post',
						dataType : 'json',
						success : function(data) {
							if (data && data.errorCode == 'success') {
								userInfo.render(data.object.result);
								showList();
								refreshPages(data.object);
							} else {
								//服务器端验证
								if (data.errorCode == '007') {
									addErrorTag('input[name="phone"]',
											data.errorMsg);
								} else if (data.errorCode == '001') {
									addErrorTag('input[name="username"]',
											data.errorMsg);
								} else if (data.errorCode == '002') {
									addErrorTag('input[name="email"]',
											data.errorMsg);
								}

								return false;
							}
						}
					});
		}

		function addErrorTag(selector, msg) {
			var controlGroup = $(selector).parents('.control-group')
			var controls = $(selector).parent();
			if (!controlGroup.hasClass('error')) {
				controls.append('<span class="help-inline">' + msg + '</span>');
				controlGroup.addClass('error');
			}
		}

		function removeErrorTag() {
			$('input, textarea')
					.each(
							function() {
								var el = $(this);
								var controls = el.parents('.controls'), controlGroup = el
										.parents('.control-group'), errorEl = controls
										.children('.help-block, .help-inline');
								if (errorEl.length > 0) {
									var help = controls.data('help-message');
									errorEl.remove();
								}
								controlGroup.attr('class', 'control-group');
							})
		}

		function ajaxFileUpload() {
			$("#loading").ajaxStart(function() {
				$(this).show('slow');
			})//开始上传文件时显示一个图片
			.ajaxComplete(function() {
				$(this).hide();
			});//文件上传完成将图片隐藏起来

			$.ajaxFileUpload({
				url : '<c:url value="/fileupload"/>',//用于文件上传的服务器端请求地址
				secureuri : false,//一般设置为false
				fileElementId : 'userHeader',//文件上传空间的id属性  <input type="file" id="file" name="file" />
				dataType : 'JSON',//返回值类型 一般设置为json(大写)
				success : function(data, status) //服务器成功响应处理函数
				{
					$("#header").attr(
							'src',
							'<c:url value="/resources/fileupload/'
									+ $(data).html() + '"/>').show();
					$("input[name='header']").val($(data).html());
				},
				error : function(data, status, e)//服务器响应失败处理函数
				{
					alert(e);
				}
			})
			return false;
		}

		function loadPages(currentPage) {
			$.ajax({
				url : 'users/pagelist',
				dataType : 'json',
				data : {
					pageNum : currentPage,
					search : $("#searchText").val()
				},
				success : function(data) {
					curPage = data.pageNum;
					userInfo.render(data.result);
					if (data.totalPage <= 1) {
						$("#mypager").hide();
					} else {
						$("#mypager").show();
					}
					$('#mypager').bootstrapPaginator({
						currentPage : data.pageNum,
						totalPages : data.totalPage,
						numberOfPages : data.numPerPage,
						onPageChanged : function(event, oldPage, newPage) {
							loadPages(newPage);
						}
					});
				}
			})
		}

		function edit(id) {
			removeErrorTag();
			$
					.ajax({
						url : 'user/get/' + id,
						success : function(data) {
							$("#addUser").show();
							$("#listUser").hide();
							$("#addUser").find("input[name='userId']").val(
									data.userId);
							$("#addUser").find("input[name='username']").val(
									data.username);
							$("#addUser").find("input[name='password']").val(
									data.password);
							$("#addUser").find("input[name='email']").val(
									data.email);
							$("#addUser").find("input[name='phone']").val(
									data.phone);

							if (null != data.header && "" != data.header) {
								$("#addUser").find("input[name='header']").val(
										data.header);
								$("#addUser")
										.find("#header")
										.attr('src',
												'<c:url value="/resources/fileupload/'+data.header+'"/>')
										.show();
							}
							if (data.actived == 1) {
								$("#addUser").find("checkbox[name='actived']")
										.attr("checked", true);
							}

						}
					})
		}

		function del(id) {
			if (confirm("Are you sure you want to destroy it?")) {
				$.ajax({
					url : '<c:url value="/admin/user/del/'+id+'" />',
					dataType : 'json',
					data : {
						pageNum : curPage
					},
					success : function(data) {
						userInfo.render(data.result);
						refreshPages(data);
					}
				})
			}
		}

		function refreshPages(data) {
			console.log(data);
			if (data.totalPage == 1) {
				$("#mypager").hide();
			}
			$('#mypager').bootstrapPaginator({
				currentPage : data.pageNum,
				totalPages : data.totalPage,
				numberOfPages : data.numPerPage
			});
		}
	</script>
</body>
</html>
